<template>
  <div>
    <el-button @click="dialogFormVisible = true">新增</el-button>
  </div>

  <div>
    <el-table
      :data="tableData"
      style="width: 100%; margin-bottom: 20px"
      row-key="_id"
      border
      default-expand-all
      center
    >
      <el-table-column prop="title" label="标题" width="200"> </el-table-column>
      <el-table-column prop="_add_time_str" label="发布时间" width="200">
      </el-table-column>
      <el-table-column prop="userInfo.username" label="作者" width="300" />

      <el-table-column label="操作">
        <el-button>编辑</el-button>
        <el-button type="danger">删除</el-button>
      </el-table-column>
    </el-table>
  </div>

  <!--  弹出层   -->

  <el-dialog v-model="dialogFormVisible" title="新增数据" width="900">
    <el-form :model="form">
      <el-form-item label="标题" :label-width="formLabelWidth">
        <el-input v-model="form.title" autocomplete="off" />
      </el-form-item>
      <el-form-item label="内容" :label-width="formLabelWidth">
        <div style="border: 1px solid #ccc">
          <Toolbar
            style="border-bottom: 1px solid #ccc"
            :editor="editorRef"
            :defaultConfig="toolbarConfig"
          />
          <Editor
            style="height: 500px; overflow-y: hidden"
            v-model="valueHtml"
            :defaultConfig="editorConfig"
            @onCreated="handleCreated"
          />
        </div>
      </el-form-item>

      <el-form-item label="排序" :label-width="formLabelWidth">
        <el-input
          v-model="form.sort"
          type="number"
          min="0"
          autocomplete="off"
        />
      </el-form-item>
      <el-form-item label="前端调准的url" :label-width="formLabelWidth">
        <el-input v-model="form.url" min="0" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="submit"> 确认 </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
import { read, create } from '@/api/notice'

import { ref, onMounted, reactive, onBeforeUnmount, shallowRef } from 'vue'
import '@wangeditor/editor/dist/css/style.css' // 引入 css

import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import { IEditorConfig } from '@wangeditor/editor'
type InsertFnType = (url: string, alt: string, href: string) => void

import { uploadFileByQN } from '@/utils/uploadFile'
const tableData = ref([])
onMounted(async () => {
  const {
    data: { rows },
  } = await read()
  console.log(rows)
  tableData.value = rows
})

const dialogFormVisible = ref(false)
const formLabelWidth = '100px'

type formType = {
  title: string
  content: string
  sort: number
  url: string
}

const form = reactive<formType>({
  title: '',
  content: '',
  sort: 0,
  url: '',
})
// 内容 HTML
const valueHtml = ref('')
function submit() {
  // const {title,sort}  = form
  //  数据校验
  form.content = valueHtml.value

  create({
    ...form,

    status: 1,
  }).then(res => {
    console.log(res)

    dialogFormVisible.value = false
  })
}

const editorRef = shallowRef() //   实例

const toolbarConfig = {} //  工具栏配置
const editorConfig: Partial<IEditorConfig> = {
  placeholder: '请输入内容...',
  MENU_CONF: {
    uploadImage: {
      maxFileSize: 1 * 1024 * 1024, // 1M
      // 最多可上传几个文件，默认为 100
      maxNumberOfFiles: 2,
      // 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []
      allowedFileTypes: ['image/*'],
      // 自定义上传参数，例如传递验证的 token 等。参数会被添加到 formData 中，一起上传到服务端。

      async customUpload(file: File, insertFn: InsertFnType) {
        // TS 语法
        // customInsert(res, insertFn) {                  // JS 语法
        // res 即服务端的返回结果

        // 从 res 中找到 url alt href ，然后插入图片
        const fileName =
          new Date().getTime().toString(36) +
          Math.random().toString(36).slice(2)
        const res = await uploadFileByQN(file, fileName)

        console.log()

        const url = import.meta.env.VITE_BASE_IMG + res.data.key

        insertFn(url, '图片', url)
      },
    },
  },
} // 编辑栏的配置

// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
  const editor = editorRef.value
  if (editor == null) return
  editor.destroy()
})

const handleCreated = (editor: any) => {
  editorRef.value = editor // 记录 editor 实例，重要！
}
</script>
